import { React } from 'react'
// import {useState, useEffect } from 'react'
// import axios from 'axios'
import { Swiper } from 'antd-mobile'
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'


import './index.css'

const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']

const items = colors.map((color, index) => (
  <Swiper.Item key={index}>
    <div
      className='content'
      style={{ background: color }}

    >
      {index + 1}
    </div>
  </Swiper.Item>
))
export default function Index()  {
  // const [realSwipers, setrealSwipers] = useState([])
  // // 获取轮播图数据
  // const getSwipers = async function () {
  //   const res = await axios.get('http://localhost:8080/home/swiper')
  //   // console.log(res);
  //   setrealSwipers({
  //     realSwipers: res.data.body
  //   })
  // };
  // // 生命周期函数
  // useEffect(() => {
  //   getSwipers()
  // })

  // const items = swipers.map(item => (
  //   <Swiper.Item key={item.id}>
  //     <div
  //       className='content'
  //     >
  //       <img alt='ccl' src={`http://localhost:8080${item.imgSrc}`} />
  //     </div>
  //   </Swiper.Item>
  // ))
  return (
    <>
    {/* 轮播图 */}
      <Swiper>{items}</Swiper>
      <div className='flex_wraper'>
        <div className='flex_item'>
          <img src={Nav1} alt='wu'></img>
          <h2>整租</h2>
        </div>
        <div className='flex_item'>
          <img src={Nav2} alt='wu'></img>
          <h2>合租</h2>
        </div>
        <div className='flex_item'>
          <img src={Nav3} alt='wu'></img>
          <h2>地图找房</h2>
        </div>
        <div className='flex_item'>
          <img src={Nav4} alt='wu'></img>
          <h2>去出租</h2>
        </div>
      </div>
    </>
  )
}


// import React from 'react'

// export default function index() {
//   return (
//     <div>index</div>
//   )
// }



